<html>
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        #container {
            width: 90%;
            max-width: 1000px;
            margin: 0 auto;
            background-color: #eeeeee;
            padding: 20px;
        }

        #avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 0 auto;
        }

        #info {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .item {
            width: 45%;
            height: 60px;
            line-height: 60px;
            font-size: 24px;
            color: #222831;
        }

        .item i {
            margin-right: 10px;
        }

        .item span {
            margin-left: 20px;
        }

        #button,#logout,#updatePassword {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            text-decoration: none;
            color: white;
            background-color: #00adb5;
            border-radius: 10px;
            margin-top: 20px;
        }

        #button:hover,#logout:hover {
            background-color: #3f72af;
        }
    </style>
    <script>
        function getUserInfo() {
            // 使用jQuery的ajax方法发送GET请求
            $.ajax({
                url: "http://localhost:8080/stadium/user/inf", // 请求的URL
                type: "GET", // 请求的方法
                dataType: "json", // 预期返回的数据类型
                success: function (data) { // 请求成功时的回调函数
                    console.log(data)

                    var avatar = document.getElementById("avatar");
                    var userAccount = document.getElementById("userAccount");
                    var phone = document.getElementById("phone");
                    var gender = document.getElementById("gender");
                    var age = document.getElementById("age");
                    var email = document.getElementById("email");
                    avatar.src = data.avatarUrl; // 设置头像的src属性为返回的数据中的avatarUrl字段
                    userAccount.innerText = data.userAccount; // 设置用户账号的文本内容为返回的数据中的userAccount字段
                    phone.textContent = data.phone; // 设置电话的文本内容为返回的数据中的phone字段
                    gender.textContent = data.gender === "0" ? "男" : "女"; // 设置性别的文本内容为返回的数据中的gender字段，如果是male则显示男，否则显示女
                    age.textContent = data.age + "岁"; // 设置年龄的文本内容为返回的数据中的age字段加上岁字
                    email.textContent = data.email; // 设置邮箱的文本内容为返回的数据中的email字段
                },
                error: function (xhr) { // 请求失败时的回调函数
                    alert("请求失败：" + xhr.status); // 弹出一个警告框，显示请求失败和状态码
                }
            });
        }

        function editUserInfo() {
            window.location.href = "http://localhost:8080/stadium/reservation_page/update.html";
        }

        function updatePassword() {
            window.location.href = "http://localhost:8080/stadium/reservation_page/updatePassword.html";
        }

        function logOut() {
            $.ajax({
                url:"http://localhost:8080/stadium/common/logOut", // 请求的URL
                type:"GET", // 请求的方法
                success:function(data) { // 请求成功时的回调函数
                    alert("退出登录成功"); // 弹出一个提示框，显示退出登录成功
                    window.location.href = "http://localhost:8080/stadium/usermanagement_page/login.html"; // 跳转到登录页面
                    // window.location.reload(); // 强制刷新页面
                    // 添加清除localStorage缓存的代码
                    window.localStorage.clear();
                    console.log("logOut-Success");
                    console.log(data);
                },
                error:function(xhr) { // 请求失败时的回调函数
                    alert("退出登录失败：" + xhr.status); // 弹出一个警告框，显示退出登录失败和状态码
                }
            });
        }
    </script>
</head>
<body onload="getUserInfo()">
<div id="container">
    <img id="avatar" src="" alt="用户头像">
    <div id="info">
        <div class="item"><i class="fas fa-user"></i><span id="userAccount"></span></div>
        <div class="item"><i class="fas fa-phone"></i><span id="phone"></span></div>
        <div class="item"><i class="fas fa-venus-mars"></i><span id="gender"></span></div>
        <div class="item"><i class="fas fa-birthday-cake"></i><span id="age"></span></div>
        <div class="item"><i class="fas fa-envelope"></i><span id="email"></span></div>
    </div>
    <a id="button" href="#" onclick="editUserInfo()">修改个人信息</a>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <a id="updatePassword" href="#" onclick="updatePassword()">修改密码</a>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <a id="logout" href="#" onclick="logOut()">退出登录</a>
</div>
</body>
</html>
